<script setup>
import { dutyArtificialServe, dutyGetPeopleServe } from '@/api/duty'
import { useFormatStore } from '@/stores'
import { nameToId } from '@/utils/dutyListChange'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

const emit = defineEmits(['getDutyList'])
const formatStore = useFormatStore()
const { columnLabels } = storeToRefs(formatStore)
//手动排班
const dialogVisibleArtificial = ref(false)
const artificialParams = ref({ day: '', schedule: '' })
//     //获取的改时间段空闲人员
const prepareName = ref([])
//     //原来的，待修改的人员
const originalNameId = ref([])
const submitNameId = ref([])
const showWeek = ref([])
const artificialArrange = async (sWeek, day, schedule, editNameList) => {
  //开排
  showWeek.value = sWeek
  artificialParams.value.day = day
  artificialParams.value.schedule = schedule
  const res = await dutyGetPeopleServe(artificialParams.value)
  prepareName.value = res
  //回显
  originalNameId.value = editNameList
  resetNameId()
  dialogVisibleArtificial.value = true
}
//   ///刷新
const resetNameId = () => {
  submitNameId.value = JSON.parse(JSON.stringify(originalNameId.value))
}
//  ///提交
const onSubmitNameId = async () => {
  await ElMessageBox.confirm('确定提交修改吗？需确保人数正确。', '温馨提醒', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
  let nL = nameToId(prepareName.value, submitNameId.value)
  await dutyArtificialServe({ week: showWeek.value, record: nL, ...artificialParams.value })
  emit('getDutyList')
  ElMessage.success({ message: '手动修改成功', offset: 70 })
  dialogVisibleArtificial.value = false
}

defineExpose({
  artificialArrange
})
</script>

<template>
  <!-- 手动排班 -->
  <el-dialog v-model="dialogVisibleArtificial" title="手动排班" width="60%">
    <div>
      <strong>
        第{{ showWeek }}周/ {{ columnLabels[artificialParams.day - 1] }}/ 第{{
          artificialParams.schedule
        }}班
      </strong>
      <span>请选择该时段值班人员</span>
    </div>
    <div>
      <div class="divone">
        <strong style="margin: auto" v-if="!prepareName[0]">暂无数据</strong>
        <el-checkbox-group v-model="submitNameId" v-else>
          <el-checkbox
            class="divtwo"
            v-for="item in prepareName"
            :key="item.stu_id"
            :label="item.name"
            :value="item.name"
            border
          >
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisibleArtificial = false">取消</el-button>
        <el-button @click="resetNameId">刷新</el-button>
        <el-button type="primary" @click="onSubmitNameId">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.divtwo {
  height: 27px;
  width: 100px;
  margin-right: 12px;
  margin-left: 11px;
  margin-top: 7px;
  margin-bottom: 7px;
}
.divone {
  display: flex;
  flex-wrap: wrap;
}
</style>
